<template>
  <div class="headlines-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">今日要闻</h1>
        <p class="page-subtitle">聚焦全球热点，掌握最新资讯</p>
        <div class="header-meta">
          <span class="update-time">{{ currentTime }}</span>
          <span class="news-count">{{ totalNews }} 条新闻</span>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="content-container">
      <!-- 左侧主要内容 -->
      <div class="main-content">
        <!-- 头条新闻 -->
        <div class="top-story">
          <div class="top-story-card">
            <div class="story-image">
              <img src="https://images.unsplash.com/photo-1611273426858-450d8e3c9fce?w=800&h=400&fit=crop" alt="头条新闻" />
              <div class="image-overlay">
                <div class="story-category">突发新闻</div>
                <div class="story-time">{{ formatTime(headlineNews.time) }}</div>
              </div>
            </div>
            <div class="story-content">
              <h2 class="story-title">{{ headlineNews.title }}</h2>
              <p class="story-summary">{{ headlineNews.summary }}</p>
              <div class="story-meta">
                <div class="meta-left">
                  <span class="source">{{ headlineNews.source }}</span>
                  <span class="author">{{ headlineNews.author }}</span>
                </div>
                <div class="meta-right">
                  <span class="views">{{ formatNumber(headlineNews.views) }} 阅读</span>
                  <span class="comments">{{ headlineNews.comments }} 评论</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 新闻列表 -->
        <div class="news-grid">
          <div 
            v-for="(news, index) in newsList" 
            :key="news.id"
            class="news-item"
            :class="{ 'featured': news.featured }"
          >
            <div class="news-card">
              <div class="news-image-container">
                <img :src="news.image" :alt="news.title" />
                <div class="news-category">{{ news.category }}</div>
                <div class="news-overlay">
                  <div class="overlay-actions">
                    <button class="action-btn like-btn" @click="toggleLike(news)">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                      </svg>
                      {{ news.likes }}
                    </button>
                    <button class="action-btn share-btn" @click="shareNews(news)">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                        <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
              <div class="news-content">
                <h3 class="news-title">{{ news.title }}</h3>
                <p class="news-summary">{{ news.summary }}</p>
                <div class="news-meta">
                  <div class="meta-info">
                    <span class="source">{{ news.source }}</span>
                    <span class="time">{{ formatTime(news.time) }}</span>
                  </div>
                  <div class="meta-stats">
                    <span class="views">{{ formatNumber(news.views) }}</span>
                    <span class="comments">{{ news.comments }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 加载更多 -->
        <div class="load-more-section">
          <button class="load-more-btn" @click="loadMore" :disabled="loading">
            <span v-if="!loading">加载更多新闻</span>
            <span v-else>加载中...</span>
          </button>
        </div>
      </div>

      <!-- 右侧边栏 -->
      <div class="sidebar">
        <!-- 热门话题 -->
        <div class="sidebar-section">
          <h3 class="section-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
            </svg>
            热门话题
          </h3>
          <div class="hot-topics">
            <div 
              v-for="(topic, index) in hotTopics" 
              :key="topic.id"
              class="topic-item"
              :class="{ 'trending': topic.trending }"
            >
              <div class="topic-rank">{{ index + 1 }}</div>
              <div class="topic-content">
                <div class="topic-title">{{ topic.title }}</div>
                <div class="topic-heat">
                  <div class="heat-bar" :style="{ width: topic.heat + '%' }"></div>
                  <span class="heat-text">{{ formatNumber(topic.count) }}</span>
                </div>
              </div>
              <div class="topic-trend" :class="topic.trend">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                  <path v-if="topic.trend === 'up'" d="M7 14l5-5 5 5" stroke="currentColor" stroke-width="2"/>
                  <path v-else-if="topic.trend === 'down'" d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2"/>
                  <path v-else d="M8 12h8" stroke="currentColor" stroke-width="2"/>
                </svg>
              </div>
            </div>
          </div>
        </div>

        <!-- 推荐媒体 -->
        <div class="sidebar-section">
          <h3 class="section-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
            推荐媒体
          </h3>
          <div class="media-list">
            <div 
              v-for="media in recommendedMedia" 
              :key="media.id"
              class="media-item"
            >
              <img :src="media.logo" :alt="media.name" class="media-logo" />
              <div class="media-info">
                <div class="media-name">{{ media.name }}</div>
                <div class="media-followers">{{ formatNumber(media.followers) }} 关注</div>
              </div>
              <button class="follow-btn" @click="toggleFollow(media)">
                {{ media.isFollowing ? '已关注' : '关注' }}
              </button>
            </div>
          </div>
        </div>

        <!-- 今日数据 -->
        <div class="sidebar-section">
          <h3 class="section-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
            </svg>
            今日数据
          </h3>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-number">{{ todayStats.newsCount }}</div>
              <div class="stat-label">新闻发布</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ todayStats.readCount }}</div>
              <div class="stat-label">总阅读量</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ todayStats.commentCount }}</div>
              <div class="stat-label">评论数量</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ todayStats.shareCount }}</div>
              <div class="stat-label">分享次数</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 当前时间
const currentTime = ref('')
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

onMounted(() => {
  updateTime()
  setInterval(updateTime, 60000) // 每分钟更新一次
})

// 头条新闻数据
const headlineNews = ref({
  id: 1,
  title: '全球气候峰会达成历史性协议，各国承诺加速减排行动',
  summary: '在为期两周的激烈谈判后，来自195个国家的代表终于就应对气候变化的具体措施达成一致。协议要求各国在2030年前将碳排放量减少45%，并建立1000亿美元的绿色气候基金，用于支持发展中国家的清洁能源转型。',
  image: 'https://images.unsplash.com/photo-1611273426858-450d8e3c9fce?w=800&h=400&fit=crop',
  category: '突发新闻',
  source: '环球时报',
  author: '李明',
  time: new Date(),
  views: 125680,
  comments: 342,
  likes: 2156
})

// 新闻列表数据
const newsList = ref([
  {
    id: 2,
    title: '人工智能技术突破：新型算法实现99.9%图像识别准确率',
    summary: '清华大学研究团队发布最新成果，该算法在多个国际标准数据集上均创下新纪录，有望应用于医疗诊断、自动驾驶等领域。',
    image: 'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=400&h=300&fit=crop',
    category: '科技',
    source: '科技日报',
    time: new Date(Date.now() - 2 * 60 * 60 * 1000),
    views: 89420,
    comments: 156,
    likes: 892,
    featured: true
  },
  {
    id: 3,
    title: '新能源汽车销量创历史新高，传统燃油车市场份额首次跌破50%',
    summary: '最新数据显示，今年前三季度新能源汽车销量同比增长85%，充电基础设施建设加速推进。',
    image: 'https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=400&h=300&fit=crop',
    category: '汽车',
    source: '汽车周刊',
    time: new Date(Date.now() - 4 * 60 * 60 * 1000),
    views: 67340,
    comments: 89,
    likes: 567
  },
  {
    id: 4,
    title: '国际空间站迎来新一批宇航员，太空探索任务再升级',
    summary: '来自五个国家的七名宇航员将开展为期六个月的科学实验，包括微重力环境下的生物医学研究。',
    image: 'https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?w=400&h=300&fit=crop',
    category: '航天',
    source: '航天报',
    time: new Date(Date.now() - 6 * 60 * 60 * 1000),
    views: 45670,
    comments: 67,
    likes: 445
  },
  {
    id: 5,
    title: '量子计算领域取得重大突破，新型量子处理器性能提升千倍',
    summary: '中科院量子信息与量子科技创新研究院成功研发出新一代量子处理器，为量子计算实用化迈出关键一步。',
    image: 'https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=400&h=300&fit=crop',
    category: '科技',
    source: '科学网',
    time: new Date(Date.now() - 8 * 60 * 60 * 1000),
    views: 78920,
    comments: 123,
    likes: 678
  },
  {
    id: 6,
    title: '全球粮食安全面临新挑战，智慧农业技术成为关键解决方案',
    summary: '联合国粮农组织报告显示，通过物联网、大数据等技术手段，农业产量有望提升30%以上。',
    image: 'https://images.unsplash.com/photo-1574323347407-f5e1ad6d020b?w=400&h=300&fit=crop',
    category: '农业',
    source: '农民日报',
    time: new Date(Date.now() - 12 * 60 * 60 * 1000),
    views: 34560,
    comments: 45,
    likes: 334
  },
  {
    id: 7,
    title: '5G网络建设加速推进，全国行政村5G覆盖率达到95%',
    summary: '工信部最新统计显示，5G基站建设进度超预期，为数字经济发展奠定坚实基础。',
    image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
    category: '通信',
    source: '通信世界',
    time: new Date(Date.now() - 16 * 60 * 60 * 1000),
    views: 56780,
    comments: 78,
    likes: 445
  }
])

// 热门话题数据
const hotTopics = ref([
  { id: 1, title: '气候变化', count: 125680, heat: 95, trend: 'up' },
  { id: 2, title: '人工智能', count: 89420, heat: 88, trend: 'up' },
  { id: 3, title: '新能源', count: 67340, heat: 82, trend: 'up' },
  { id: 4, title: '太空探索', count: 45670, heat: 75, trend: 'stable' },
  { id: 5, title: '量子计算', count: 78920, heat: 85, trend: 'up' },
  { id: 6, title: '智慧农业', count: 34560, heat: 65, trend: 'down' },
  { id: 7, title: '5G建设', count: 56780, heat: 78, trend: 'up' },
  { id: 8, title: '数字经济', count: 43210, heat: 70, trend: 'stable' }
])

// 推荐媒体数据
const recommendedMedia = ref([
  { id: 1, name: '人民日报', logo: 'https://via.placeholder.com/40x40/FF6B6B/FFFFFF?text=人', followers: 12500000, isFollowing: false },
  { id: 2, name: '新华社', logo: 'https://via.placeholder.com/40x40/4ECDC4/FFFFFF?text=新', followers: 8900000, isFollowing: true },
  { id: 3, name: '环球时报', logo: 'https://via.placeholder.com/40x40/45B7D1/FFFFFF?text=环', followers: 6700000, isFollowing: false },
  { id: 4, name: '科技日报', logo: 'https://via.placeholder.com/40x40/96CEB4/FFFFFF?text=科', followers: 3400000, isFollowing: true }
])

// 今日统计数据
const todayStats = ref({
  newsCount: 156,
  readCount: 1256800,
  commentCount: 2341,
  shareCount: 5678
})

// 计算属性
const totalNews = computed(() => newsList.value.length + 1)

// 方法
const formatTime = (date) => {
  const now = new Date()
  const diff = now - date
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const minutes = Math.floor(diff / (1000 * 60))
  
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  return date.toLocaleDateString('zh-CN')
}

const formatNumber = (num) => {
  if (num >= 10000) return (num / 10000).toFixed(1) + '万'
  if (num >= 1000) return (num / 1000).toFixed(1) + '千'
  return num.toString()
}

const toggleLike = (news) => {
  news.liked = !news.liked
  news.likes += news.liked ? 1 : -1
}

const shareNews = (news) => {
  if (navigator.share) {
    navigator.share({
      title: news.title,
      text: news.summary,
      url: window.location.href
    })
  } else {
    // 复制到剪贴板
    navigator.clipboard.writeText(`${news.title} - ${window.location.href}`)
    alert('链接已复制到剪贴板')
  }
}

const toggleFollow = (media) => {
  media.isFollowing = !media.isFollowing
  media.followers += media.isFollowing ? 1000 : -1000
}

const loadMore = () => {
  // 模拟加载更多新闻
  const moreNews = [
    {
      id: newsList.value.length + 8,
      title: '生物医药创新加速，新型抗癌药物进入临床试验阶段',
      summary: '多家制药公司联合研发的创新药物展现出良好前景，为患者带来新的希望。',
      image: 'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=400&h=300&fit=crop',
      category: '医疗',
      source: '健康报',
      time: new Date(Date.now() - 20 * 60 * 60 * 1000),
      views: 23450,
      comments: 34,
      likes: 223
    },
    {
      id: newsList.value.length + 9,
      title: '教育改革持续深化，素质教育理念深入人心',
      summary: '各地积极探索创新教育模式，注重培养学生的综合素质和创新能力。',
      image: 'https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=400&h=300&fit=crop',
      category: '教育',
      source: '教育时报',
      time: new Date(Date.now() - 24 * 60 * 60 * 1000),
      views: 45670,
      comments: 67,
      likes: 445
    }
  ]
  newsList.value.push(...moreNews)
}

const loading = ref(false)
</script>

<style scoped>
/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  padding: 60px 0 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="1" fill="white" opacity="0.05"/><circle cx="10" cy="60" r="1" fill="white" opacity="0.05"/><circle cx="90" cy="40" r="1" fill="white" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 10px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  margin: 0 0 20px;
  opacity: 0.9;
}

.header-meta {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 内容容器 */
.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
}

/* 主要内容区 */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 头条新闻 */
.top-story {
  background: white;
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.top-story:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-hover-shadow);
}

.top-story-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 400px;
}

.story-image {
  position: relative;
  overflow: hidden;
}

.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.top-story:hover .story-image img {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.story-category {
  background: var(--accent-color);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
}

.story-time {
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
}

.story-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 20px;
  line-height: 1.3;
}

.story-summary {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 30px;
}

.story-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.meta-left, .meta-right {
  display: flex;
  gap: 15px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.source {
  font-weight: 600;
  color: var(--primary-color);
}

/* 新闻网格 */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
}

.news-item {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: all 0.3s ease;
}

.news-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-hover-shadow);
}

.news-item.featured {
  grid-column: span 2;
}

.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.news-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-item:hover .news-image-container img {
  transform: scale(1.05);
}

.news-category {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent-color);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.news-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.news-item:hover .news-overlay {
  opacity: 1;
}

.overlay-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.action-btn:hover {
  background: white;
  transform: scale(1.1);
}

.like-btn {
  color: var(--danger-color);
}

.share-btn {
  color: var(--success-color);
}

.news-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-summary {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 16px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.meta-info {
  display: flex;
  gap: 12px;
}

.meta-stats {
  display: flex;
  gap: 8px;
}

/* 侧边栏 */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-section {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 24px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 20px;
}

.section-title svg {
  color: var(--primary-color);
}

/* 热门话题 */
.hot-topics {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.topic-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.topic-item:hover {
  background: var(--bg-color);
}

.topic-item.trending {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
}

.topic-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.topic-content {
  flex: 1;
}

.topic-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.topic-heat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.heat-bar {
  height: 4px;
  background: var(--accent-color);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.heat-text {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.topic-trend {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.topic-trend.up {
  color: var(--success-color);
  background: rgba(76, 175, 80, 0.1);
}

.topic-trend.down {
  color: var(--danger-color);
  background: rgba(244, 67, 54, 0.1);
}

.topic-trend.stable {
  color: var(--text-secondary);
  background: rgba(108, 117, 125, 0.1);
}

/* 推荐媒体 */
.media-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.media-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.media-item:hover {
  background: var(--bg-color);
}

.media-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.media-info {
  flex: 1;
}

.media-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 2px;
}

.media-followers {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.follow-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 16px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.follow-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.follow-btn:active {
  transform: translateY(0);
}

/* 统计数据 */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  border-radius: 8px;
  background: var(--bg-color);
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 4px;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* 加载更多 */
.load-more-section {
  text-align: center;
  margin-top: 20px;
}

.load-more-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.load-more-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .top-story-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  
  .story-content {
    padding: 30px;
  }
  
  .news-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .news-item.featured {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .header-meta {
    flex-direction: column;
    gap: 10px;
  }
  
  .content-container {
    padding: 20px 15px;
  }
  
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .story-title {
    font-size: 1.5rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 40px 0 30px;
  }
  
  .story-content {
    padding: 20px;
  }
  
  .news-content {
    padding: 15px;
  }
  
  .sidebar-section {
    padding: 20px;
  }
}
</style>